<!-- 秒杀导航栏 -->
<template>
    <div>
      <div class="box">
          <div class="left" @click="fun1">
              <div></div>
          </div>
          <div class="io1"><p>京东到家小时达</p></div>
          <div class="io"><van-icon name="apps-o" size="22px" color="#666666"/></div>
          <div class="right" @click="fun"><div>
          </div>
      </div>
      </div>
      <div class="box1" v-if="flag">
          <div class="box-1">
              <p><van-icon name="home-o" size="17"/></p>
              <div>首页</div>
          </div>
          <div class="box-2">
              <p><van-icon name="apps-o" size="17" /></p>
              <div>分类搜索</div>
          </div>
          <div class="box-3">
              <p><van-icon name="cart-o" size="17"/></p>
              <div>购物车</div>
          </div>
          <div class="box-4">
              <p><van-icon name="contact" size="17" /></p>
              <div>我的京东</div>
          </div>
          <div class="box-5">
              <p><van-icon name="browsing-history-o" size="17"/></p>
              <div>浏览记录</div>
          </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
      data(){
          return {
              flag:false
          }
      },
      methods: {
          fun (){
              this.flag = !this.flag
          },
          fun1(){
            this.$router.back()
          }
      }
  }
  </script>
  
  <style scoped>
     .box {
      width: 100%;
      height: 44px;
      border-bottom: 1px solid #e5e5e5;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
     }
     .box .left {
      width: 40px;
      height: 44px;
     }
  
     .box .left div{
      margin:12px 0 0 10px;
      width: 20px;
      height: 20px;
      background: url(../../../assets/img/1.png) no-repeat 50%;
      background-size:contain;
      background-position: 0 0;
     }
     .right {
      width: 40px;
      height: 44px;
     }
     .right div {
      margin: 12px 12px 12px 10px;
      width: 20px;
      height: 20px;
      background: url(../../../assets/img/2.png) no-repeat 50%;
      background-size:20px;
     }
     .box1 {
      width: 125px;
      height: 200px;
      background-color: #eee;
      background-color: black;
      opacity: 0.9;
      border-radius: 5px;
      position: absolute;
      top:44px;
      right:10px;
      z-index: 1000;
     }
     .box1 > div {
      display: flex;
      width: 125px;
      height: 40px;
      color: #fff;
      font-size: 14px;
     }
     .box-1 div {
      border-bottom: 1px solid #eee;
      width: 85px;
      line-height: 40px;
     }
     .box-2 div {
      border-bottom: 1px solid #eee;
      width: 85px;
      line-height: 40px;
     }
     .box-3 div {
      border-bottom: 1px solid #eee;
      width: 85px;
      line-height: 40px;
     }
     .box-4 div {
      border-bottom: 1px solid #eee;
      width: 85px;
      line-height: 40px;
     }
     .box-5 div {
      width: 85px;
      line-height: 40px;
     }
     
     .box-1 p {
      width: 40px;
      text-align: center;
     }
     .box-2 p {
      width: 40px;
      text-align: center;
     }
     .box-3 p {
      width: 40px;
      text-align: center;
     }
     .box-4 p {
      width: 40px;
      text-align: center;
     }
     .box-5 p {
      width: 40px;
      text-align: center;
     }
    .io {
        margin-left: 60px;
    }
    .io1 {
        margin-left: 80px;
    }
  </style>